
$class('CategoryView', Widget, {

	// Members
	_templateString: '<div class="categorys"></div>',

	_itemCounter: 0,

	// Methods
	constructor: function()
	{
		console.debug(this._className)
	},

	create: function(parent)
	{
		this.super(Widget.prototype.create, arguments);
		// You can use this._domNode.preappend(parent);
		this._domNode.appendTo(parent);
		this._domNode.css('width', parent.css('width'));
		this._domNode.css('height', parent.css('height'));

		/*
		this.addHandler('HelloEvent', function(a, b){
            console.debug(b);
        });
		this.addHandler('HelloEvent', function(a, b){
            console.debug(a);
        });
        */    
		return this._domNode;
	},

	destroy: function()
	{
	},

	toString: function()
	{
		return "<Widget: 'CategoryView'>";
	},

	addItem: function(text, contentArg)
	{
		if ( !this.addItem.containerNode )
		{
			this.addItem.containerNode = this._domNode;
		}

		var item = new CategoryViewItem(null, null, contentArg);
		item.setText(text);
		item.setIndex(this._itemCounter++);
		item.create(this.addItem.containerNode, text);
	},
});


$class('CategoryViewItem', Widget, {

	_templateFile: "thtml/CategoryViewItem.html",

	_contentTemplateFile: null,

	_contentClass: null,

	_popStyle: "mouseover",

	_text: null,

	_index: 0,

	// Methods

	// Ctor:
	// text is the text shown
	// contentArg may be Pop Pane's template file (shown by CommonView)
	// contentArg may be Some Other widget Class. 
	constructor: function(widgetId, templateFile, contentArg)
	{
		if (typeof(contentArg) == 'string' && contentArg.endsWith('.html'))
		{
			this._contentTemplateFile = contentArg;
		}
		else
		{
			this._contentClass = contentArg;
		}
	},

	setText: function(text)
	{
		this._text = text;
	},

	create: function(parent)
	{
		this.super(Widget.prototype.create, arguments);
		// You can use this._domNode.preappend(parent);
		this._domNode.appendTo(parent);
		this.setLink(this._text);
		this.initEventHandler();
		if (0 == this._index)
			this._domNode.find('span').addClass('first');
		return this._domNode;
	},

	initEventHandler: function()
	{
		var _this = this;
		this._domNode
		.mouseover( function(){
			_this.whenHover(true);
		})
		.mouseout( function(){
			_this.whenHover(false);
		});
	},

	setIndex: function(index)
	{
		this._index = index;
	},

	whenHover: function(hover)
	{
		if (!this.whenHover.defaultColor)
		{
			this.whenHover.defaultColor = this._domNode.css('background-color');
		}
		this._domNode.css('background-color', hover ? '#fff' : this.whenHover.defaultColor);

		if ( hover ) {
			if ( this._contentTemplateFile || this._contentClass ) {
				this.popPane();
			}
		} else {
			this.hidePane();
		}
	},

	popPane: function()
	{
		/*
		$.event.trigger('HelloEvent', {"a":"A"}, null);
		*/
		var popContentPane = this._domNode.find('div.pop');
		if ( hj.empty(popContentPane.html()) )
		{
			if (this._contentClass)
			{
				var contentView = new this._contentClass;
			}
			else
			{
				var contentView = new CommonView(this._contentTemplateFile);
			}
			contentView.create(popContentPane);
		}
		this._domNode.find('span').addClass('actived');

		popContentPane.css('display', 'block');
		return true;
	},

	hidePane: function()
	{
		this._domNode.find('div.pop').css('display', 'none');
		this._domNode.find('span').removeClass('actived');
	},

	setPopStyle: function(popStyle)
	{
		this._popStyle = popStyle;
	},

	setLink: function(text)
	{
		console.debug(text)
		this._domNode.find('a.category-name').text(text);
	},

	addLink: function(text)
	{

	},

	destroy: function()
	{

	},

	toString: function()
	{
		return "<Widget: 'CategoryViewItem'>";
	}

});